import React, { useEffect, useState } from 'react'
import { fastTestApi } from '@/Api'
import ListAltIcon from '@material-ui/icons/ListAlt';
import './fast.less'
import { Button } from '@material-ui/core';
import { useHistory } from 'react-router';
import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
export default function Fast() {
    const history = useHistory();
    const [recordsArr, setRecordsArr] = useState([])
    const [itemArr,getItemArr] = useState([])
    const [actionCode,getActionCode] = useState([])
    useEffect(() => {
        fastTestApi().then(res => {
            console.log(res);
            res.data.records.forEach(el => {
                el.openList = false
            })
            setRecordsArr(res.data.records)
            console.log(res.data.records);
        }).catch(err => {
            console.log(err);
        })

    }, [])
    const goToFastLiItem = (item) => {
       console.log(item.actionCode);
       getActionCode(item.actionCode)
       history.push({
           pathname:'/fastItem',
           state:{
               actionCode:item.actionCode
           }
       })
    }
    return (
        <div className="fast">
            <ul className="fast-ul">
                {
                    recordsArr.map(item => {
                        return (
                            <li className="fast-item" key={item.key}>
                                <div className="fast-li flex">
                                    <div className="left flex">
                                        <ListAltIcon />
                                        <span>
                                            {item.title}
                                        </span>
                                    </div>
                                    <div className="right">
                                        <Button variant="contained" color="primary" onClick={()=>goToFastLiItem(item)}>刷题</Button>
                                    </div>
                                </div>
                            </li>
                        )
                    })
                }
            </ul>
        </div>
    )
}
